<template>
  <div class="drag">
    <div class="add-program">
      <el-button type="primary" @click="addInfo">新增栏目</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" border highlight-current-row>
      <el-table-column align="center" label="栏目名称" min-width="20">
        <template slot-scope="scope">
          <i class="el-icon-rank"/>
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="内容类型" min-width="15">
        <template slot-scope="scope">
          <span>{{ scope.row.typeStr }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序方式" min-width="10">
        <template slot-scope="scope">
          <span>{{ scope.row.orderTypeStr }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设置展示数量" min-width="10">
        <template slot-scope="scope">
          <span>{{ scope.row.showCount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="实际展示数量" min-width="10">
        <template slot-scope="scope">
          <span>{{ scope.row.realCount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="20">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClickEdit(scope)">编辑</el-button>
          <el-button type="danger" @click="deleteDiscovery(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-if="dialog" :visible.sync="dialog" title="新增栏目" width="580px">
      <el-form ref="createInfo" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="栏目名称" prop="title">
          <el-input v-model="form.title" style="width:300px"/>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio label="normal">普通课程</el-radio>
            <el-radio label="live">直播课程</el-radio>
            <el-radio label="class">班级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader
            :change-on-select="true"
            :options="courseCategory"
            :props="{ value: 'id' }"
            v-model="category"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item v-if="form.type !== 'live'" label="排序方式">
          <el-radio-group v-model="form.orderType">
            <el-radio label="new">最新</el-radio>
            <el-radio label="hot">最热</el-radio>
            <el-radio label="recommend">推荐</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设置展示数量">
          <el-select v-model="form.showCount" placeholder="请选择">
            <el-option
              v-for="item in showNumbers"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <p
            style="margin:0;line-height:20px;color:#737373"
          >提示：一个模块最多显示六门课程。如果有更多的显示要求可以进入更多选项查看更多的课程。</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  import {getCategoryList} from '@/api/subject/category'
  import {addDiscovery, deleteDiscovery, getDiscovery, updateDiscovery} from '@/api/operate/discovery'
  import {getTenantId} from '@/utils/auth'

  export default {
    name: 'DragTable',
    data() {
      return {
        list: [],
        category: [],
        form: {
          title: '',
          type: 'normal',
          categoryId: '',
          categoryName: '',
          orderType: 'new',
          showCount: '2'
        },
        showNumbers: [
          {
            label: '2',
            value: '2'
          },
          {
            label: '4',
            value: '4'
          },
          {
            label: '6',
            value: '6'
          }
        ],
        courseCategory: [],
        dialog: false,
        total: null,
        listLoading: false,
        sortable: null,
        rules: {
          title: [
            {required: true, message: '不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.setSort();
      this.getData();
      this.getCategoryList()
    },
    methods: {

      setSort() {
        // 拖拽排序
        const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
        this.sortable = Sortable.create(el, {})
      },
      handleChange(val) {
        console.log('jaisdjoasijdoa');
        console.log(this.category);
        this.form.categoryId = this.category[this.category.length - 1]
        // this.form.categoryName = idAndName[1]
      },
      handleClickEdit(scope) {
        this.dialog = true;
        this.form = Object.assign({}, scope.row)
      },
      deleteDiscovery(scope) {
        this.$confirm('确认要删除该栏目', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDiscovery(scope.row.id).then(res => {
            this.$notify({
              title: '成功',
              message: '发现页栏目已删除',
              type: 'success',
              duration: 2000
            });
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      },
      addInfo() {
        this.dialog = true;
        this.category = [];
        this.form = {type: 'normal', orderType: 'new', showCount: '2'}
      },
      saveInfo() {
        this.$refs.createInfo.validate((valid) => {
          if (valid) {
            if (this.form.type === 'live') {
              this.form.orderType = ''
            }
            if (this.form.id) {
              updateDiscovery(this.form).then(res => {
                this.$notify({
                  title: '成功',
                  message: '发现页栏目修改成功',
                  type: 'success',
                  duration: 2000
                });
                this.getData()
              })
            } else {
              this.form.tenantId = getTenantId();
              addDiscovery(this.form).then(res => {
                this.$notify({
                  title: '成功',
                  message: '新增发现页栏目成功！',
                  type: 'success',
                  duration: 2000
                });
                this.getData()
              })
            }
            this.dialog = false
          }
        })
      },
      getData() {
        getDiscovery().then(res => {
          this.list = res.data.items.filter(item => {
            if (item.tenantId !== getTenantId()) return false;
            return true
          });
          this.list.map(item => {
            if (!item.realCount) item.realCount = item.showCount;
            if (item.type === 'normal') item.typeStr = '普通课程';
            if (item.type === 'live') item.typeStr = '直播课程';
            if (item.type === 'class') item.typeStr = '班级';
            if (item.orderType === 'new') item.orderTypeStr = '最新';
            if (item.orderType === 'hot') item.orderTypeStr = '最热';
            if (item.orderType === 'recommend') item.orderTypeStr = '推荐'
          })
        })
      },
      getCategoryList() {
        getCategoryList('course', getTenantId(), '0').then(response => {
          this.courseCategory = response.data.items
        })
      }
    }
  }
</script>

<style lang="scss">
  .drag {
    .el-icon-rank {
      font-size: 20px;
      position: absolute;
      left: 20%;
      cursor: pointer;
    }

    .add-program {
      width: 100%;
      height: 70px;
      background-color: #e6e9ed;
      line-height: 70px;
      padding-right: 20px;
      box-sizing: border-box;
      margin-bottom: 20px;
      text-align: right;
    }
  }
</style>
